// 定位
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.t-0 {
  top: 0;
}

.b-0 {
  bottom: 0;
}

.l-0 {
  bottom: 0;
}

.r-0 {
  right: 0;
}

// 块
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

// 层深
@for $i from 1 through 10 {
  .zIndex-#{$i} {
    z-index: $i;
  }
}

// 字体加粗
@for $i from 4 through 9 {
  .font-w-#{100*$i} {
    font-weight: 100 * $i;
  }
}

// 文本对齐
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

// 文本溢出省略
.text-ellipsis-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.text-ellipsis-3 {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

// flex 横向
.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex-evenly {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

// flex 纵向
.flex-tb-start {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}

.flex-tb-center {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.flex-tb-end {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}

.flex-tb-between {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}

.flex-tb-around {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}

.flex-tb-evenly {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
}

// flex 单独
.flex {
  display: flex;
}

.flex-lr {
  flex-direction: row;
}

.flex-rl {
  flex-direction: row-reverse;
}

.flex-tb {
  flex-direction: column;
}

.flex-bt {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-baseline {
  align-items: baseline;
}

.align-stretch {
  align-items: stretch;
}

.flex-1 {
  flex: 1 1 0;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow {
  flex-grow: 1;
}

// gap 间隔
@for $i from 1 through 50 {
  .c-gap-#{$i} {
    column-gap: $i + px;
  }

  .r-gap-#{$i} {
    row-gap: $i + px;
  }
}

// hover 样式
.pointer {
  cursor: pointer;
}

// 字体大小
@for $i from 6 through 15 {
  .font-s-#{2*$i} {
    font-size: 2px * $i;
  }
}

// 边框
.border {
  border: 1px solid;
}

.border-t {
  border-top: 1px solid;
}

.border-b {
  border-bottom: 1px solid;
}

.border-l {
  border-left: 1px solid;
}

.border-r {
  border-right: 1px solid;
}


// 圆角
@for $i from 1 through 15 {
  .border-radius-#{2*$i} {
    border-radius: 2px*$i;
  }
}

// margin & padding
@for $i from 1 through 50 {
  .mt-#{2*$i} {
    margin-top: 2px * $i;
  }

  .mb-#{2*$i} {
    margin-bottom: 2px * $i;
  }

  .ml-#{2*$i} {
    margin-left: 2px * $i;
  }

  .mr-#{2*$i} {
    margin-right: 2px *$i;
  }

  .pt-#{2*$i} {
    padding-top: 2px * $i;
  }

  .pb-#{2*$i} {
    padding-bottom: 2px * $i;
  }

  .pl-#{2*$i} {
    padding-left: 2px * $i;
  }

  .pr-#{2*$i} {
    padding-right: 2px * $i;
  }

  .w-#{2*$i} {
    width: 2px * $i;
  }

  .h-#{2*$i} {
    height: 2px * $i;
  }
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}


.color-3 {
  color: #333;
}

.color-4 {
  color: #444;
}

.color-5 {
  color: #555;
}

.color-6 {
  color: #666;
}

.color-7 {
  color: #777;
}

.color-8 {
  color: #888;
}

.color-9 {
  color: #999;
}

.color-fe {
  color: #fefefe;
}

.color-white {
  color: #fff;
}